<template>
    <div class="packing-list-box">
        <!-- <template v-if="!config.disable"> -->
        <el-row justify="center"> 
            <el-col v-if="!config.disable" :span="5" >
                <el-row align="middle">
                    <el-col :span="10" class="text-right">提箱城市:</el-col>
                    <el-col :span="14">
                        <!-- <el-select v-model="param.carryCityId" placeholder="请输入选择" size="small" clearable filterable remote reserve-keyword :disabled="config.disable" @change="getPacklingListInfo">
                            <el-option v-for="(item,index) in param.cityOptions" :key="index" :label="item.cityCName" :value="item.id" />
                        </el-select> -->                 
                        <city-select :selectCity="param.carryCityId" :valueSel="true" @cityId="startCityId" style="width: 100%;"></city-select>
                    </el-col>
                </el-row>
            </el-col>
            <el-col v-if="!config.disable" :span="3"> 
                <el-row align="middle">
                    <el-col :span="12"  class="text-right">箱型:</el-col>
                    <el-col :span="12">
                        <el-select v-model="param.boxType" placeholder="请选择" size="small" :disabled="config.disable" @change="getPacklingListInfo">
                            <el-option label="40HQ" value="5"/>
                            <el-option label="40GP" value="10"/>
                            <el-option label="20HQ" value="15"/>
                            <el-option label="20GP" value="20"/>
                        </el-select>
                    </el-col>
                </el-row>
            </el-col>
            <el-col v-if="!config.disable" :span="3">
                <el-row align="middle">
                    <el-col :span="12"  class="text-right" >箱况:</el-col>
                    <el-col :span="12">
                        <el-select v-model="param.boxCondition" placeholder="请选择" size="small" :disabled="config.disable"  @change="getPacklingListInfo">
                            <el-option label="适货" value="15"/>
                            <el-option label="次新" value="10"/>
                            <el-option label="混提" value="20"/>
                            <el-option label="全新" value="5"/>
                        </el-select>
                    </el-col>
                </el-row>
            </el-col>
            <el-col v-if="!config.disable" :span="4">
                <el-row align="middle">
                    <el-col :span="8"  class="text-right">客户:</el-col>
                    <el-col :span="16">
                        <el-input v-model="param.agentName" placeholder="请输入" size="small"  @change="getPacklingListInfo"></el-input>
                    </el-col>
                </el-row>
            </el-col>
            <el-col v-if="!config.disable" :span="4">
                <el-row align="middle">
                    <el-col :span="8"  class="text-right">联系人:</el-col>
                    <el-col :span="16">
                        <el-input v-model="param.agentUserName" placeholder="请输入" size="small"  @change="getPacklingListInfo"></el-input>
                    </el-col>
                </el-row>
            </el-col>
            <el-col v-if="!config.disable" :span="4">
                <el-row align="middle">
                    <el-col :span="8"  class="text-right">联系电话:</el-col>
                    <el-col :span="16">
                        <el-input v-model="param.agentUserTel" placeholder="请输入" size="small"  @change="getPacklingListInfo"></el-input>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <!-- </template> -->
        <el-table ref="multipleTableRef" :data="tableData" row-key="id" @selection-change="handleSelectionChange" empty-text="请尝试选择其它箱型/箱况" style="width: 100%;margin-top: 10px;">
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column prop="orderNo" label="订单号" width="200" align="center"/>
            <el-table-column prop="carryCityName" label="提箱城市" width="80" align="center"/>
            <el-table-column label="箱型" width="70" align="center">
                <template #default="scope">
                    {{ formatBoxType(scope.row.boxType) }} 
                </template>
            </el-table-column>
            <el-table-column label="箱况" width="60" align="center">
                <template #default="scope">
                    {{ formatBoxCondition(scope.row.boxCondition)}} 
                </template>
            </el-table-column>
            <el-table-column label="总重（KG）" width="130" align="center">
                <template #default="scope">
                {{ scope.row.boxType <= 10 ? '30480/32500KG' : '30480KG' }} </template>
            </el-table-column>
            <el-table-column prop="boxQuantity" label="箱量" width="60" align="center"></el-table-column>
            <el-table-column prop="packingAllocationQuantity" label="已开箱量" width="100" align="center"></el-table-column>
            <el-table-column prop="wkQuantity" label="未开箱量" width="100" align="center">
                <template #default="scope">
                    {{ scope.row.boxQuantity - scope.row.packingAllocationQuantity }} 
                </template>
            </el-table-column>
            <el-table-column label="预计提箱日期" width="120" align="center">
                <template #default="scope">
                    {{ formatDate(scope.row.planPickupDate, 2) }} 
                </template>
            </el-table-column>
            <el-table-column label="下单日期" width="120" align="center">
                <template #default="scope">
                {{ formatDate(scope.row.createTime) }} </template>
            </el-table-column>
            <el-table-column prop="agentName" label="客户" width="150" align="center"/>
            <!-- <el-table-column prop="agentUserName" label="联系人" width="80" align="center"/>
            <el-table-column prop="agentUserTel" label="联系电话" width="150" align="center">
                <template #default="scope">+{{scope.row.agentUserAreaCode}} {{ scope.row.agentUserTel }}</template>
            </el-table-column> -->
        </el-table>
        <div style="margin-top: 20px;height: 50px;">
            <el-button @click="selectOrder" type="primary" style="float: right;">确定</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted,ref,reactive, inject } from 'vue'
import { formatDate, formatBoxType, formatBoxCondition } from '@/utils'
import { boxEastSelfCallbackOrderPackingListPage } from '@/api/boxCallBack/order'
import { boxEastPackingListPage } from '@/api/boxServer'
import { getSellPurchaseBoxOrderPage } from '@/api/boxDeal/boxBuy'
// import { getCity } from '@/api/system/city'
import citySelect from '@/components/citySelect'
const emit = defineEmits(['checkOrderList'])

const fun = inject('packingInfo');
const injectInfn = fun();
const config = inject('config');

const props = defineProps({
    subassemblyInfo: {
        type: Object,
        default: () => { }
    },
    orderType: {
        type: String,
        default: "0"  // 5 - 租箱， 10 - 回调 ，（200 - 售箱）
    },
    sources: {
        type: Number,
        default: 0  // 5 - 租箱， 10 - 回调 ，（200 - 售箱）
    },
    disable: {
        type: Boolean,
        default: false
    },
    currentNumber: {
        type: String,  // 订单内开提箱单 必选单号
        default: ""
    }
})
const param = reactive({
    carryCityId:"",
    boxType: "5",
    boxCondition: "15",
    agentName: "",
    agentUserName:"",
    agentUserTel:"",
    cityOptions:[] // 提箱城市待选集合
})
onMounted(() => {
    // getCity({}).then(res => {
    //     console.log("res",res);
    //     param.cityOptions = res.data
    // });
    if(config.sources == "internal"){
        param.agentName = injectInfn[0]?.agentName || ""
        param.boxType = injectInfn[0]?.boxType || ""
        param.boxCondition = injectInfn[0]?.boxCondition || ""
        param.agentUserName = injectInfn[0]?.agentUserName || ""
        param.agentUserTel = injectInfn[0]?.agentUserTel || ""
        param.carryCityId = injectInfn[0]?.carryCityId || ""
    }
    
    getPacklingListInfo()
})

const tableData = ref([])
const startCityId = (id: string) => {
  param.carryCityId = id
    getPacklingListInfo()
}
const getPacklingListInfo = async () => {
    tableData.value = []
    let template = {
        pageNum: 1,
        pageSize: 200,
        agentName:param.agentName?.trim(),
        boxType: param.boxType,
        boxCondition: param.boxCondition,
        carryCityId: param.carryCityId,
        agentUserName:param.agentUserName?.trim(),
        agentUserTel:param.agentUserTel?.trim(),
        sortBeans: [{ "field": "createTime", "isAsc": "asc" }] // desc 降序  asc 升序
    }
    if(props.orderType == "5"){
        boxEastPackingListPage(template).then(res => {
            // tableData.value = res.data.list
            res.data.list.forEach((el: any) => {
                if(el.orderNo != props.currentNumber){
                    tableData.value.push(el)
                }
            });
        });
    }else if(props.orderType == "10"){
        if(config.sources == "internal"){
            template.agentName = props.subassemblyInfo.agentName
            template.boxType = injectInfn[0]?.boxType
            template.boxCondition = injectInfn[0]?.boxCondition
            template.carryCityId = props.subassemblyInfo.carryCityId
        }
        boxEastSelfCallbackOrderPackingListPage(template).then(res => {
            res.data.list.forEach((el: any) => {
                if(el.orderNo != props.currentNumber){
                    tableData.value.push(el)
                }
            }); 
           
        });
    }else if(props.orderType == "200"){
        template.status = 20
        getSellPurchaseBoxOrderPage(template).then(res => {
            console.log("200",res);
            tableData.value = res.data.list
        });
    }

}
const selectedOrders = ref([])

const selectOrder = () => {
    emit('checkOrderList',selectedOrders.value)  
}
// 选中状态发生变化时调用
const handleSelectionChange = (row) => {
    selectedOrders.value = row
}

</script>

<style lang="scss" scoped></style>